<template>
  <div class="icons">
    
    <swiper :options="swiperOption">
      <swiper-slide v-for="(page,index) of pages" :key="index">
        <div class="icon" v-for="item in page" :key=item.id> 
          <img :src="item.url" alt="">
          <span>{{item.desc}}</span>
        </div>
      </swiper-slide>
      <!-- <swiper-slide>
        <div class="icon"> 
          <img src="https://picbed.qunarzz.com/01d2f57f920666364197a850dab859a8.png" alt="">
          <span>民宿</span>
        </div>
      </swiper-slide> -->
    </swiper>
  </div>
</template>

<script>
  export default {
    name:'HomeIcons',
    props:{
      list:Array
    },
    data() {
      return {
        swiperOption:{
          autoplay:false
        },
        iconList:[{
          id:'0001',
          url:'https://picbed.qunarzz.com/01d2f57f920666364197a850dab859a8.png',
          desc:'民宿客栈'
        },{
          id:'0002',
          url:'https://picbed.qunarzz.com/83af731055e121a3251690b225327b56.png',
          desc:'专车自驾'
        },{
          id:'0003',
          url:'https://picbed.qunarzz.com/5b6737be49ca243072ca614f07803b83.png',
          desc:'赚钱·信用卡'
        },{
          id:'0004',
          url:'https://picbed.qunarzz.com/1e107321f5396ea4994cd832232ecf8a.png',
          desc:'旅游团购'
        },{
          id:'0005',
          url:'https://picbed.qunarzz.com/c65b3bb7571a6bd62df669213e44b84d.png',
          desc:'一日游'
        },{
          id:'0006',
          url:'https://picbed.qunarzz.com/f6bb08a239ce1b038204120a8d1e4669.png',
          desc:'特惠酒店'
        },{
          id:'0007',
          url:'https://picbed.qunarzz.com/3a08f360e958ccb2b947049387873ace.png',
          desc:'借钱'
        },{
          id:'0008',
          url:'https://picbed.qunarzz.com/19b4f6d2fabd617789fa5aad65b249da.png',
          desc:'白金卡'
        },{
          id:'0009',
          url:'https://picbed.qunarzz.com/799d9d090d1625a854194460c8849fee.png',
          desc:'邮轮'
        }]
      }
    },/* 
    methods: {
      handerClick(){
        console.log('ddd');
        
      }
    }, */
    computed: {
      pages(){
        const pages=[]
        this.iconList.forEach((item,index)=>{
          const page=Math.floor(index/8)
          if (!pages[page]) {
            pages[page]=[]
          }
          pages[page].push(item)
        })
        return pages
      }
    },
  }
</script>

<style lang="stylus" scoped>
  //@import url(../assets/styles/varibles.styl);
    //@import '../../styles/mixins.styl'
  .icons>>>.swiper-container
    height:0
    padding-bottom 50%
  .icons
    overflow :hidden
    //height:0
    //padding-bottom 50%
    //background :green
    .icon
      position :relative
      overflow :hidden
      height :0
      float :left
      width :25%
      height :50%
      padding-bottom :25%
      //background :red
      img 
        width 80%
        position :absolute
        top:0
        left:0
        right:0
        bottom:.44rem
        display :block
        margin :0 auto 
        height:100%-.44rem
        //margin .3rem
      span
        position :absolute
        left :0
        right:0
        bottom :0
        height :.44rem
        line-height :.44rem
        display :block
        text-align :center
        color :$darkTextcolor
        ellipsis()
</style>